<template>
	<vi-popup ref="viDialog"
		:point="setting.point"
		:useMask="useMask"
		:maskClick="maskClick"
		bgColor="transparent"
		width="auto"
		:shift="shift"
		@opened="winOpened"
		@closed="winClosed"
		@change="winChange">
		<view :id="'dialog'+id" class="vi_dialog" :style="mainStyle">
			<!-- 顶部按钮 -->
			<view class="vi_dialog_topButtons" v-if="topbarList_L.length||topbarList_R.length||(setting.useTitle&&embedTitle)">
				<view class="vi_dialog_buttonGroup" :style="{'justify-content':inTopbar.aside?'flex-start':topAlign, 'flex-grow':inTopbar.aside?0:1}">
					<view class="vi_dialog_buttonBox" :class="item.class" v-for="(item, index) in topbarList_L" :key="index"
						:style="`flex-grow:${topAlign=='evenly'?1:0};${item.width?'width:'+item.width+';':''}`+item.style">
						<vi-button @click="onClick(item)"
							compName="dialog"
							:type="item.type||inTopbar.type||setting.type"
							:color="item.color||inTopbar.color||color"
							:textColor="item.textColor||inTopbar.textColor||textColor"
							:borderColor="item.borderColor||inTopbar.borderColor"
							:backgroundColor="item.backgroundColor||inTopbar.backgroundColor"
							:size="item.size||inTopbar.size||setting.size"
							:plain="item.hasOwnProperty('plain')?!!item.plain:(inTopbar.hasOwnProperty('plain')?inTopbar.plain:true)"
							:borderWidth="item.borderWidth||0"
							:borderType="item.borderType"
							:disabled="!!item.disabled"
							width="100%"
							:height="topbarHeight"
							:radius="item.radius||inTopbar.radius||0"
							:fontSize="item.fontSize||inTopbar.fontSize||''"
							:bold="item.bold||inTopbar.bold||false">
							<text class="vi_dialog_text">{{item.name}}</text>
						</vi-button>
					</view>
				</view>
				<view class="vi_dialog_title" v-if="setting.useTitle&&embedTitle"
					:style="{
						'height':(inTopbar.buttonHeight||buttonHeight||2.5)+'em',
						'background-color':titleBgColor?titleBgColor:'transparent'
					}">
					<slot name="title">
						<vi-style-controller
							compName="dialog"
							:size="inTopbar.size||setting.size"
							:height="topbarHeight">
							<text class="vi_dialog_text" v-if="title">{{title}}</text>
						</vi-style-controller>
					</slot>
				</view>
				<view class="vi_dialog_buttonGroup" :style="{'justify-content':'flex-end', 'flex-grow':inTopbar.aside?0:1}" v-if="inTopbar.aside">
					<view class="vi_dialog_buttonBox" :class="item.class" v-for="(item, index) in topbarList_R" :key="index"
						:style="`flex-grow:${topAlign=='evenly'?1:0};${item.width?'width:'+item.width+';':''}`+item.style">
						<vi-button @click="onClick(item)"
							compName="dialog"
							:type="item.type||inTopbar.type||setting.type"
							:color="item.color||inTopbar.color||color"
							:textColor="item.textColor||inTopbar.textColor||textColor"
							:borderColor="item.borderColor||inTopbar.borderColor||''"
							:backgroundColor="item.backgroundColor||inTopbar.backgroundColor||''"
							:size="item.size||inTopbar.size||setting.size"
							:plain="item.hasOwnProperty('plain')?!!item.plain:(inTopbar.hasOwnProperty('plain')?inTopbar.plain:true)"
							:borderWidth="item.borderWidth||0"
							:borderType="item.borderType||'solid'"
							:disabled="!!item.disabled"
							width="100%"
							:height="topbarHeight"
							:radius="item.radius||inTopbar.radius||0"
							:fontSize="item.fontSize||inTopbar.fontSize||''"
							:bold="item.bold||inTopbar.bold||false">
							<text class="vi_dialog_text">{{item.name}}</text>
						</vi-button>
					</view>
				</view>
			</view>
			<view class="vi_dialog_line" :style="lineTopStyle" v-if="inTopbar.line&&inTopbar.aside"></view>
			<view class="vi_dialog_title vi_dialog_center" :style="{'height':setting.titleHeight+'em'}" v-if="setting.useTitle&&!embedTitle">
				<slot name="title">
					<text class="vi_dialog_text" v-if="title">{{title}}</text>
				</slot>
			</view>
			<view class="vi_dialog_content" v-if="setting.useContent">
				<scroll-view scroll-y :style="{'height':bodyHeight||'auto', 'max-height':maxHeight||'none'}" @touchmove.stop>
					<slot />
				</scroll-view>
			</view>
			
			<!-- 分隔线 -->
			<view class="vi_dialog_line" :style="lineToolStyle" v-if="inToolbar.line&&toolbarList.length"></view>
			<view class="vi_dialog_line" :style="lineBottomStyle" v-if="mergeRow&&inBottombar.line&&(!inToolbar.line||!toolbarList.length)"></view>
			
			<view class="vi_dialog_bottomButtons" :style="{'flex-direction':mergeRow?'row':'column', 'align-items':'stretch'}">
				<!-- 工具按钮 -->
				<view class="vi_dialog_buttonGroup" :style="{'justify-content':toolAlign}">
					<view class="vi_dialog_buttonBox" :class="item.class" v-for="(item, index) in toolbarList" :key="index"
						:style="`flex-grow:${toolAlign=='evenly'?1:0};`+item.style">
						<vi-button @click="onClick(item)"
							compName="dialog"
							:type="item.type||inToolbar.type||setting.type"
							:color="item.color||inToolbar.color||color"
							:textColor="item.textColor||inToolbar.textColor||textColor"
							:borderColor="item.borderColor||inToolbar.borderColor||''"
							:backgroundColor="item.backgroundColor||inToolbar.backgroundColor||''"
							:size="item.size||inToolbar.size||setting.size"
							:plain="item.hasOwnProperty('plain')?!!item.plain:(inToolbar.hasOwnProperty('plain')?inToolbar.plain:true)"
							:borderWidth="item.borderWidth||0"
							:borderType="item.borderType||'solid'"
							:disabled="!!item.disabled"
							width="100%"
							:height="toolbarHeight"
							:radius="item.radius||inToolbar.radius||0"
							:fontSize="item.fontSize||inToolbar.fontSize||''"
							:bold="item.bold||inToolbar.bold||false">
							<text class="vi_dialog_text">{{item.name}}</text>
						</vi-button>
					</view>
				</view>
				<!-- 分隔线 -->
				<view class="vi_dialog_line" :style="lineBottomStyle" v-if="!mergeRow&&inBottombar.line&&bottombarList.length&&(setting.useTitle||setting.useContent||toolbarList.length)"></view>
				<!-- 底部按钮 -->
				<view class="vi_dialog_buttonGroup"
					:style="{
						'flex-direction':inBottombar.column?'column':'row',
						'justify-content':inBottombar.column?'center':bottomAlign,
						'align-items':inBottombar.column?'stretch':'center'
					}">
					<view class="vi_dialog_buttonBox" :class="item.class" v-for="(item, index) in bottombarList" :key="index"
						:style="`flex-grow:${bottomAlign=='evenly'?1:0};`+item.style">
						<!-- 分隔线 -->
						<view class="vi_dialog_line" :style="lineBottomStyle" v-if="inBottombar.column&&inBottombar.line&&index>0"></view>
						<vi-button @click="onClick(item)"
							compName="dialog"
							:type="item.type||inBottombar.type||setting.type"
							:color="item.color||inBottombar.color||color"
							:textColor="item.textColor||inBottombar.textColor||textColor"
							:borderColor="item.borderColor||inBottombar.borderColor||''"
							:backgroundColor="item.backgroundColor||inBottombar.backgroundColor||''"
							:size="item.size||inBottombar.size||setting.size"
							:plain="item.hasOwnProperty('plain')?!!item.plain:(inBottombar.hasOwnProperty('plain')?inBottombar.plain:false)"
							:borderWidth="item.borderWidth||0"
							:borderType="item.borderType||'solid'"
							:disabled="!!item.disabled"
							width="100%"
							:height="bottombarHeight"
							:radius="item.radius||inBottombar.radius||0"
							:fontSize="item.fontSize||inBottombar.fontSize||''"
							:bold="item.bold||inBottombar.bold||false">
							<text class="vi_dialog_text">{{item.name}}</text>
						</vi-button>
					</view>
				</view>
			</view>
			
		</view>
	</vi-popup>
</template>

<script>
	export default {
		name:"viDialog",
		props: {
			type:{
				type:[String,null],
				default:null
			},
			color:{
				type:[String,null],
				default:""
			},
			textColor:{
				type:[String,null],
				default:""
			},
			bgColor:{
				type:[String,null],
				default:""
			},
			radius:{
				type:[Number,String,null],
				default:null
			},
			size:{
				type:[String,null],
				default:null
			},
			//窗口位置
			point:{
				type:[String,null],
				default:""
			},
			//窗口偏移
			shift:{
				type:[Object,null],
				default:()=>({})
			},
			useMask:{
				type:[Boolean,null],
				default:null
			},
			maskClick:{
				type:[Boolean,null],
				default:null
			},
			//框外间距
			spaceOutside:{
				type:[Number,String,Array,null],
				default:0
			},
			//框内间距
			spaceInside:{
				type:[Number,String,Array,null],
				default:null
			},
			//窗口宽度，center、left、right使用
			width:{
				type:[String,null],
				default:""
			},
			//窗口高度，left、right使用
			height:{
				type:[String,null],
				default:""
			},
			maxWidth:{
				type:[String,null],
				default:null
			},
			maxHeight:{
				type:[String,null],
				default:null
			},
			bodyHeight:{
				type:[String,null],
				default:""
			},
			buttonHeight:{
				type:[Number,null],
				default:0
			},
			title:{
				type:[String,null],
				default:""
			},
			//标题高度，非嵌入式标题时有效
			titleHeight:{
				type:[Number,null],
				default:0
			},
			titleBgColor:{
				type:[String,null],
				default:""
			},
			useTitle:{
				type:[Boolean,null],
				default:null
			},
			useContent:{
				type:[Boolean,null],
				default:null
			},
			//按钮集合
			/*数据格式：
				按钮条设置
				{
					type:"primary",		主题
					color:"",			自定主题色
					textColor:,			固定文字色
					borderColor,		固定边框色
					backgroundColor,	固定背景色
					palin:false,		镂空，topbar、toolbar默认为true
					buttonWidth:"",		按钮宽
					buttonHeight:3,		高度，单位em
					radius:0,			默认按钮圆角
					line:false,	分隔线，topbar在按钮下方，开启aside时有效；toolbar在按钮上方，bottombar在按钮上方，开启合并时只显示一条
					lineWidth:100%,		分隔线宽，自动居中
					lineHeight:1px,		分隔线高
					lineColor:"",		分隔线颜色
					fontSize:"",		文字大小
					bold:false,			文字加粗
					
					aside:false,		两侧按钮。topbar开启后按钮置于标题两侧；toolbar与bottombar同时开启后合并为一行
					asideNum:[1,1],		左右按钮数量。topbar开启aside后必须，默认【1,1】
					column:false,		列表型按钮，bottombar使用，开启后按钮竖向排列，不能与aside并存，优先于aside
					align:"evenly",		水平分布，topbar、toolbar在未开启aside时有效，bottombar在未开启column时有效
					
					list:[
						{
							type:"primary",	主题
							color:"",		自定主题色
							textColor:,		固定文字色
							borderColor,	固定边框色
							backgroundColor,固定背景色
							palin:false,	镂空
							borderWidth:0	边框宽，四个方向
							radius:0,		圆角，四个方向
							borderType:"",	边框类型
							disabled:false,	禁用
							event:"",		按钮事件
							close:false,	触发事件后是否关闭
							name:"",		按钮文字
							style:"",		手动样式
							class:"",		指定样式类名，全局样式有效
							width:"",		按钮宽
							fontSize:"",	文字大小
							bold:false,		文字加粗
						}
					]
				}
			*/
			topbar:{
				type:[Object,null],
				default:()=>({})
			},
			toolbar:{
				type:[Object,null],
				default:()=>({})
			},
			bottombar:{
				type:[Object,null],
				default:()=>({})
			},
		},
		data() {
			return {
				id:null,
				inTopbar:{},
				inToolbar:{},
				inBottombar:{},
				topbarList_L: [],
				topbarList_R: [],
				toolbarList: [],
				bottombarList: [],
				dicAlign:{
					left: "flex-start",
					right: "flex-end",
					center: "center",
					evenly: "evenly",//无效css属性值，用来表示等距
					between: "space-between",
					full: "stretch"//用于bottombar的column模式
				},
				winInfo:{
					width:0,
					height:0
				},
				unFullScreen:null,//用于计算
			}
		},
		computed: {
			//将默认值内含到css、计算属性等地方，只内含真值
			//规避特殊使用的情况下，由prop传入undefined、null等无效数据导致的，默认值失效问题。例如组件嵌套且需要组件间参数传递
			//HBuilder X3.3.13; 微信开发者工具stable 1.05.2111300
			//微信小程序会对传入的undefined、null值根据参数类型输出不同空值(false、""、null、0)，参数类型为null或未指定参数类型则输出null
			//H5会对传入的undefined取默认值，未设默认值则输出undefined。对传入的null值固定输出null
			//做参数传递时需警惕两者行为不同而造成的陷阱，主要问题出现在微信小程序的空值转化，输出非用户传入的空值、假值，使默认真值丢失
			//兼容空值取默认值的可行方案目前为，参数类型加入null如[Boolean,null]，判断传入参数是否为定义的类型，是则使用，否则赋予默认值
			setting(){
				return {
					point: this.point ||"center",
					type: this.$api.isDefined(this.type)? this.type :"default",
					size: this.$api.isDefined(this.size)? this.size :"md",
					useTitle: this.$api.isBoolean(this.useTitle)? this.useTitle :"true",
					useContent: this.$api.isBoolean(this.useContent)? this.useContent :"true",
					bgColor: this.bgColor ||"#fff",
					radius: this.$api.isDefined(this.radius)? this.radius :"0.5em",
					width: this.width ||"75%",
					maxWidth: this.$api.isDefined(this.maxWidth)? this.maxWidth :"40em",
					titleHeight: this.titleHeight ||2.5,
				}
			},
			boxRadius(){
				let res =[0,0,0,0];
				let r =this.setting.radius;
				if(r){
					res =[r,r,r,r];
				}
				if(this.setting.point=="center"){
					return res
				}
				//贴边的圆角置0
				for(let i=0; i<4; i++){
					let unCheck;
					switch(this.setting.point){
						case "top":
							unCheck = 2;
							break;
						case "bottom":
							unCheck = 0;
							break;
						case "left":
							unCheck = 1;
							break;
						case "right":
							unCheck = 3;
							break;
						default:
							unCheck =-1
					}
					let thisUnset = i==unCheck? false: !this.boxMargin[i],
						nextUnset = (i+1)%4==unCheck? false: !this.boxMargin[(i+1)%4];
					if(unCheck>-1&&(thisUnset||nextUnset)){
						res[(i+1)%4] =0
					}
				}
				//未全屏
				if(this.unFullScreen){
					switch(this.setting.point){
						case "top":
							res[2] = r;
							res[3] = r;
							break;
						case "bottom":
							res[0] = r;
							res[1] = r;
							break;
						case "left":
							res[1] = r;
							res[2] = r;
							break;
						case "right":
							res[0] = r;
							res[3] = r;
							break;
					}
				}
				return res
			},
			boxMargin(){
				let res =[0,0,0,0];
				if(this.spaceOutside){
					if(this.$api.isArray(this.spaceOutside)){
						res = this.spaceOutside
					}else{
						let m = this.spaceOutside;
						res = [m,m,m,m];
					}
				}
				switch(this.setting.point){
					case "top":
						res[2] =0;
						break;
					case "bottom":
						res[0] =0;
						break;
					case "left":
						res[1] =0;
						break;
					case "right":
						res[3] =0;
						break;
				}
				return res
			},
			boxPadding(){
				let res,
					spaceInside = this.spaceInside;;
				if(this.$api.isValue(spaceInside)){
					res = this.$api.isArray(spaceInside)? spaceInside.join(" ") :spaceInside
				}
				return res
			},
			//按钮嵌入标题
			embedTitle(){
				return !!this.inTopbar.aside
			},
			//toolbar、bottombar合并
			mergeRow(){
				return this.inToolbar.aside && this.inBottombar.aside && !this.inBottombar.column
			},
			topAlign(){
				return this.embedTitle? this.dicAlign.between: this.dicAlign[this.inTopbar.align] || this.dicAlign.evenly
			},
			toolAlign(){
				return this.dicAlign[this.inToolbar.align]? this.dicAlign[this.inToolbar.align] :(this.mergeRow? this.dicAlign.left :this.dicAlign.left)
			},
			bottomAlign(){
				return this.inBottombar.column? this.dicAlign.full: this.dicAlign[this.inBottombar.align] || this.dicAlign.evenly
			},
			winWidth(){
				switch(this.setting.point){
					case "top":
					case "bottom":
						return "100%"
					default:
						return this.setting.width
				}
			},
			winHeight(){
				switch(this.setting.point){
					case "left":
					case "right":
						if(this.height){
							return this.height
						}
						return "100%"
					default:
						return ""
				}
			},
			topbarHeight(){
				let inTopbar = this.inTopbar;
				if(inTopbar.buttonHeight){
					return inTopbar.buttonHeight+'em'
				}
				if(this.buttonHeight){
					return this.buttonHeight+'em'
				}
				return ""
			},
			toolbarHeight(){
				let inToolbar = this.inToolbar;
				if(inToolbar.buttonHeight){
					return inToolbar.buttonHeight+'em'
				}
				if(this.buttonHeight){
					return this.buttonHeight+'em'
				}
				return ""
			},
			bottombarHeight(){
				let inBottombar = this.inBottombar;
				if(inBottombar.buttonHeight){
					return inBottombar.buttonHeight+'em'
				}
				if(this.buttonHeight){
					return this.buttonHeight+'em'
				}
				return ""
			},
			mainStyle(){
				let res = {
					"background-color":this.setting.bgColor,
					"border-radius":this.boxRadius.join(' '),
					"overflow":'hidden'
				}
				this.boxPadding? res["padding"]=this.boxPadding :"";
				let margin = this.boxMargin;
				//宽度处理，减去左右边距
				if(this.winWidth){
					let w = this.winWidth;
					let mStr ="";
					if(w.endsWith("%")){
						w = w.replace("%", "vw")
					}
					if(margin[1]){
						mStr += " - " + margin[1]
					}
					if(margin[3]){
						mStr += " - " + margin[3]
					}
					res["width"] = mStr? `calc(${w}${mStr})` :w
				}
				if(this.winHeight){
					let h = this.winHeight;
					let mStr ="";
					if(h.endsWith("%")){
						h = h.replace("%", "vw")
					}
					if(margin[0]){
						mStr += " - " + margin[0]
					}
					if(margin[2]){
						mStr += " - " + margin[2]
					}
					res["height"] = mStr? `calc(${h}${mStr})` :h
				}
				//边距处理
				switch(this.setting.point){
					case "top":
						res["margin-top"] = margin[0];
						break;
					case "bottom":
						res["margin-bottom"] = margin[2];
						break;
					case "left":
						res["margin-left"] = margin[3];
						break;
					case "right":
						res["margin-right"] = margin[1];
						break;
				}
				let maxWidth = this.setting.maxWidth;
				if(maxWidth){
					res["max-width"] = maxWidth
				}
				return this.$api.objToStr(res)
			},
			lineTopStyle(){
				let res ={};
				res["width"] = this.inTopbar.lineWidth? this.inTopbar.lineWidth:'100%';
				res["border-bottom-width"] = this.inTopbar.lineHeight? this.inTopbar.lineHeight:'1px';
				res["border-color"] = this.inTopbar.lineColor ||"#eee";
				return this.$api.objToStr(res)
			},
			lineToolStyle(){
				let res ={};
				res["width"] = this.inToolbar.lineWidth? this.inToolbar.lineWidth:'100%';
				res["border-bottom-width"] = this.inToolbar.lineHeight? this.inToolbar.lineHeight:'1px';
				res["border-color"] = this.inToolbar.lineColor ||"#eee";
				return this.$api.objToStr(res)
			},
			lineBottomStyle(){
				let res ={};
				res["width"] = this.inBottombar.lineWidth? this.inBottombar.lineWidth:'100%';
				res["border-bottom-width"] = this.inBottombar.lineHeight? this.inBottombar.lineHeight:'1px';
				res["border-color"] = this.inBottombar.lineColor ||"#eee";
				return this.$api.objToStr(res)
			},
		},
		methods: {
			open(){
				try{
					const res = uni.getSystemInfoSync();
					Object.assign(this.winInfo, {
						width: res.windowWidth,
						height: res.windowHeight
					})
				}catch (e) {
					console.log("获取系统信息失败",e);
				}
				this.$refs.viDialog.open();
				this.$emit("open");
			},
			close(){
				this.$refs.viDialog.close();
				this.$emit("close");
			},
			winOpened(){
				if(this.unFullScreen===null){
					this.$nextTick(()=>{
						const views = uni.createSelectorQuery().in(this);
						views.select(`#dialog${this.id}`)
							.fields({
								size: true
							}, (data) => {
								if(data){
									let w = data.width,
										h = data.height;
									if(["top","bottom"].includes(this.setting.point)){
										this.unFullScreen = this.winInfo.width > w+2
									}else if(["left","right"].includes(this.setting.point)){
										this.unFullScreen = this.winInfo.height > h+2
									}else{
										this.unFullScreen = false
									}
								}
							})
							.exec();
					})
				}
				//向外抛出
				this.$emit("opened")
			},
			winClosed(e){
				this.$emit("closed")
			},
			winChange(e){
				//向外抛出
				this.$emit("change",e)
			},
			//计算按钮特殊样式
			computeTopbar(){
				let r = this.setting.radius;
				//计算圆角、按钮宽度、添加首个、末尾按钮样式名
				for(let i=0, len=this.topbarList_L.length; i<len; i++){
					let item = this.topbarList_L[i];
					let classStr ="";
					let isPlain = item.hasOwnProperty('plain')? item.plain :(this.inTopbar.hasOwnProperty('plain')? this.inTopbar.plain:true);
					if(isPlain){
						if(i==0){
							classStr += "vi_dialog_plainFirst "
						}
						if(i==len-1 && !this.inTopbar.aside){
							classStr += "vi_dialog_plainLast "
						}
						classStr = classStr? classStr: "vi_dialog_plain "
					}else{
						if(i==0){
							classStr += "vi_dialog_first "
						}
						if(i==len-1 && !this.inTopbar.aside){
							classStr += "vi_dialog_last "
						}
					}
					item["class"] = item.class? classStr + item.class : classStr;
					//宽度
					if(!item.width){
						item["width"] = this.inTopbar.buttonWidth ||""
					}
				}
				//右侧列表
				for(let i=0, len=this.topbarList_R.length; i<len; i++){
					let item = this.topbarList_R[i];
					let classStr ="";
					if(item.hasOwnProperty('plain')?item.plain:(this.inTopbar.hasOwnProperty('plain')? this.inTopbar.plain:true)){
						if(i==len-1){
							classStr += "vi_dialog_plainLast "
						}
						classStr = classStr? classStr: "vi_dialog_plain "
					}else{
						if(i==len-1){
							classStr += "vi_dialog_last "
						}
					}
					item["class"] = item.class? classStr + item.class : classStr;
					//宽度
					if(!item.width){
						item["width"] = this.inTopbar.buttonWidth ||""
					}
				}
			},
			computeToolbar(){
				for(let i=0, len=this.toolbarList.length; i<len; i++){
					let item = this.toolbarList[i];
					let classStr ="";
					let isPlain = item.hasOwnProperty('plain')?item.plain:(this.inToolbar.hasOwnProperty('plain')? this.inToolbar.plain:true);
					if(isPlain){
						if(i==0){
							classStr += "vi_dialog_plainFirst "
						}
						if(i==len-1){
							classStr += "vi_dialog_plainLast "
						}
						classStr = classStr? classStr: "vi_dialog_plain "
					}else{
						if(i==0){
							classStr += "vi_dialog_first "
						}
						if(i==len-1){
							classStr += "vi_dialog_last "
						}
					}
					item["class"] = item.class? classStr + item.class : classStr;
					//宽度
					if(!item.width){
						item["width"] = this.inToolbar.buttonWidth ||""
					}
				}
			},
			computeBottombar(){
				for(let i=0, len=this.bottombarList.length; i<len; i++){
					let item = this.bottombarList[i];
					let classStr ="";
					let isPlain = item.hasOwnProperty('plain')? item.plain :(this.inBottombar.hasOwnProperty('plain')? this.inBottombar.plain:false);
					if(!this.inBottombar.column){//列表型按钮不接受控制
						if(isPlain){
							if(i==0){
								classStr += "vi_dialog_plainFirst "
							}
							if(i==len-1){
								classStr += "vi_dialog_plainLast "
							}
							classStr = classStr? classStr: "vi_dialog_plain "
						}else{
							if(i==0){
								classStr += "vi_dialog_first "
							}
							if(i==len-1){
								classStr += "vi_dialog_last "
							}
						}
					}
					item["class"] = item.class? classStr + item.class : classStr;
					//宽度
					if(!item.width){
						item["width"] = this.inBottombar.buttonWidth ||""
					}
				}
			},
			onClick(item){
				if(item.event){
					this.$emit("event", item);
				}
				if(item.close){
					this.close("fromButton")
				}
			}
		},
		watch:{
			"topbar":{
				immediate:true,
				handler(newValue){
					newValue = newValue ||{};
					this.inTopbar = newValue;
					if(newValue.aside){
						let {asideNum=[1,1]} = newValue;
						let tempList = newValue.list ||[];
						if(!this.$api.isArray(asideNum)){
							return
						}
						this.topbarList_L =[];
						this.topbarList_R =[];
						for(let i=0; i<asideNum[0]; i++){
							if(tempList[i]){
								this.topbarList_L.push(tempList[i])
							}
						}
						for(let i=asideNum[0], len=asideNum[0]+asideNum[1]; i<len; i++){
							if(tempList[i]){
								this.topbarList_R.push(tempList[i])
							}
						}
					}else{
						this.topbarList_L = newValue.list ||[]
					}
					this.computeTopbar();
				}
			},
			"toolbar":{
				immediate:true,
				handler(newValue){
					newValue = newValue ||{};
					this.inToolbar = newValue;
					this.toolbarList = newValue.list ||[];
					//计算圆角，没有bottomList时
					this.computeToolbar();
				}
			},
			"bottombar":{
				immediate:true,
				handler(newValue){
					newValue = newValue ||{};
					this.inBottombar = newValue;
					this.bottombarList = newValue.list ||[];
					this.computeBottombar();
				}
			}
		},
		created(){
			this.id = "dialog" +Math.ceil(Math.random() * 10e10).toString(36)
		},
	}
</script>

<style lang="scss">
.vi_dialog{
	box-sizing: border-box;
	overflow: hidden;
	.vi_dialog_line{
		height: 0;
		margin: auto;
		width: calc(100% - 1em);
		border-bottom: 1px solid #eee;
	}
	.vi_dialog_title{
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		.vi_dialog_text{
			// font-size: 110%;
			overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
		}
		&.vi_dialog_center{
			padding-top: 0.5em;
			height: 2.5em;
			overflow: hidden;
			.vi_dialog_text{
				line-height: 2.5;
				padding: 0 0.5em;
			}
		}
	}
	.vi_dialog_content{
		margin: 0.5em;
		overflow: hidden;
	}
	.vi_dialog_topButtons{
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		.vi_dialog_title{
			flex-grow: 1;
		}
		.vi_dialog_text{
			padding: 0 1em;
		}
	}
	.vi_dialog_buttonGroup{
		display: flex;
		align-items: center;
		// 不要加justify-content
		flex-grow: 1;
	}
	.vi_dialog_bottomButtons{
		display: flex;
		align-items: center;
		.vi_dialog_buttonBox{
			flex-grow: 1;
			&.vi_dialog_plainFirst .vi_dialog_text{
				padding-left: 1em;
				padding-right: 0.5em;
			}
			&.vi_dialog_plain .vi_dialog_text{
				padding-left: 0.5em;
				padding-right: 0.5em;
			}
			&.vi_dialog_plainLast .vi_dialog_text{
				padding-left: 0.5em;
				padding-right: 1em;
			}
			&.vi_dialog_plainFirst.vi_dialog_plainLast{
				padding-left: 1em;
				padding-right: 1em;
			}
		}
		.vi_dialog_text{
			padding: 0 1em;
		}
	}
}
</style>
